<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<style type="text/css">
		 body{
		 	 background: #455A64 url() 0 0 no-repeat;
		 }
		*{
			margin: 0px;
			padding:0px;
		}
		li{
			list-style: none;
		}

		ul{
			width: 400px;
		}
		.left{
			float: left;
		}
		.right{
			float: right;
		}

		ul li{
			width: 410px;
			/*height: 50px;*/
			background: #009688 url() 0 0 no-repeat;
			color: #fff;
			line-height: 50px;
			font-size: 16px;
			border-bottom: 1px solid #fff;
		}

		ul li .son{
			width: 390px;
			height: 90px;
			padding: 10px;
			background: #fff url() 0 0 no-repeat;
			color: #000;
			display: none;
		}

	</style>
	<script type="text/javascript">
		$(function  () {
			$('.left li').click(function(event) {
				$(this).children('.son').slideToggle();
			});

			$('.right li').click(function(event) {
				$(this).siblings().children('.son').slideUp();
				$(this).children('.son').slideDown();
			});
		})
	</script>
</head>
<body>
	<ul class="left">
		<li>Collapse item #1
			<div class="son">
				Collapse item #1Collapse item #1
			</div>
		</li>
		<li>Collapse item #2
			<div class="son">
				Collapse item #1Collapse item #1
			</div>
		</li>
		<li>Collapse item #3
			<div class="son">
				Collapse item #1Collapse item #1
			</div>
		</li>
		<li>Collapse item #4
			<div class="son">
				Collapse item #1Collapse item #1
			</div>
		</li>
	</ul>
	<ul class="right">
		<li>Collapse item #1
			<div class="son">
				Collapse item #1Collapse item #1
			</div>
		</li>
		<li>Collapse item #2
			<div class="son">
				Collapse item #1Collapse item #1
			</div>
		</li>
		<li>Collapse item #3
			<div class="son">
				Collapse item #1Collapse item #1
			</div>
		</li>
		<li>Collapse item #4
			<div class="son">
				Collapse item #1Collapse item #1
			</div>
		</li>
	</ul>
</body>
</html>